<template>
    <div class="xzcs-right-fixed">
        <div class="right-fixed-list" :class="{ 'right-fixed-list-none': !showFixed }">
            <!-- <div
                v-if="userInfo"
                class="right-fixed-item"
                @click="gokaihu"
            >
                <img class="noa" src="~/assets/images/index/r-f13.png" />
                <img class="active" src="~/assets/images/index/r-f13-a.png" />
                小竹开户
            </div> -->
            <nuxt-link to="/eventcentre" class="right-fixed-item">
                <img class="noa" src="~/assets/images/index/r-f12.png" />
                <img class="active" src="~/assets/images/index/r-f12-a.png" />
                活动中心
            </nuxt-link>
            <div v-if="userInfo" class="right-fixed-item" @click="clickSignShow">
                <img class="noa" src="~/assets/images/index/r-f8.png" />
                <img class="active" src="~/assets/images/index/r-f8-a.png" />
                签到
            </div>
            <!-- <div class="right-fixed-item" @click="goTools">
                <img class="noa" src="~/assets/images/index/r-f9.png" />
                <img class="active" src="~/assets/images/index/r-f9-a.png" />
                财税工具
            </div> -->
            <nuxt-link v-if="userInfo" to="/mynews/collectask" class="right-fixed-item">
                <img class="noa" src="~/assets/images/index/r-f10.png" />
                <img class="active" src="~/assets/images/index/r-f10-a.png" />
                消息
            </nuxt-link>
            <nuxt-link v-if="userInfo" to="/download" class="right-fixed-item">
                <img class="noa" src="~/assets/images/index/r-f11.png" />
                <img class="active" src="~/assets/images/index/r-f11-a.png" />
                下载
            </nuxt-link>

            <!-- <el-popover placement="left" width="150" trigger="hover">
                <div class="phone">
                    15205695320 <br />
                    0551-62620153
                </div>
                <div slot="reference" class="right-fixed-item">
                    <img class="noa" src="~/assets/images/index/r-f1.png" />
                    <img
                        class="active"
                        src="~/assets/images/index/r-f1-a.png"
                    />
                    电话
                </div>
            </el-popover> -->

            <!-- <el-popover placement="left" width="260" trigger="hover">
                <div class="xzcs-right-fixed-app-code">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs-gzh-new-code.png"
                        alt="小竹财税APP"
                    />
                </div>
                <div slot="reference" class="right-fixed-item">
                    <img class="noa" src="~/assets/images/index/r-f6.png" />
                    <img
                        class="active"
                        src="~/assets/images/index/r-f6-a.png"
                    />
                    公众号
                </div>
            </el-popover> -->
            <el-popover placement="left" width="126" trigger="hover">
                <div class="xzcs-right-fixed-app-code">
                    <img src="~/assets/images/wx-qifu-kefu-code.jpg" alt="小竹企服" />
                    <div class="zxkf-text">咨询客服</div>
                </div>
                <div slot="reference" v-show="$route.path.includes('service')" class="right-fixed-item">
                    <img class="noa" src="~/assets/images/index/r-f7.png" />
                    <img class="active" src="~/assets/images/index/r-f7-a.png" />
                    企服客服
                </div>
            </el-popover>
            <el-popover placement="left" width="140" trigger="hover">
                <div class="xzcs-right-fixed-app-code">
                    <img v-if="$route.path.includes('openaccount')" src="~/assets/images/wx-kaihu-kefu-code.png"
                        alt="小竹财税APP" />
                    <img v-else src="~/assets/images/wx-kefu-code.png" alt="小竹财税APP" />
                    <div class="zxkf-text">咨询客服</div>
                </div>
                <div class="phone" style="text-align: center; padding-top: 6px">
                    {{
                        $route.path.includes("openaccount")
                            ? "18956584340"
                            : "15205695320"
                    }}
                    <br />
                    {{
                        $route.path.includes("openaccount")
                            ? "18130466140"
                            : "0551-62620153"
                    }}
                </div>
                <div slot="reference" class="right-fixed-item">
                    <img class="noa" src="~/assets/images/index/r-f5.png" />
                    <img class="active" src="~/assets/images/index/r-f5-a.png" />

                    {{
                        $route.path.includes("openaccount")
                            ? "开户客服"
                            : "产品客服"
                    }}
                </div>
            </el-popover>
            <nuxt-link v-if="userInfo && (userInfo.is_bank > 1)" to="/openaccount" class="right-fixed-item">
                <img class="noa" src="~/assets/images/index/r-f14.png" />
                <img class="active" src="~/assets/images/index/r-f14-a.png" />
                小竹开户
            </nuxt-link>
            <div class="right-fixed-item right-fixed-item2" :class="{ 'right-fixed-item-none': !showButton }"
                @click="goTopSmooth">
                <img class="noa" src="~/assets/images/index/r-f4.png" />
                <img class="active" src="~/assets/images/index/r-f4-a.png" />
                顶部
            </div>
        </div>

        <div class="right-fixed-item-bottom" :class="{ 'right-fixed-item-bottom-none': !showFixed }"
            @click="checkShowFixed">
            <i :class="[
                showFixed ? 'el-icon-arrow-right' : 'el-icon-s-comment',
            ]"></i>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    name: "rightFixed",
    props: {
        showButton: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showFixed: false,
        };
    },
    mounted() {
        let showFixed = localStorage.getItem("showFixed");
        if (showFixed == "false") {
            this.showFixed = false;
        } else {
            this.showFixed = true;
        }
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapMutations("common", ["set_signShow"]),
        goTopSmooth() {
            this.$emit("goTopSmooth");
        },
        checkShowFixed() {
            this.showFixed = !this.showFixed;
            localStorage.setItem("showFixed", this.showFixed + "");
        },

        goTools() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/tools/taxcount",
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$router.push({
                path: "/tools/taxcount",
            });
        },

        // 展示签到
        async clickSignShow() {
            if (!this.userInfo) {
                this.$confirm("请登录后签到", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.set_signShow(true);
        },

        async gokaihu() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/tools/taxcount",
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$router.push({
                path: "/openaccount",
            });
        },
    },
};
</script>

<style lang="scss">
@keyframes collapseAnimation {
    from {
        height: auto;
        /* 初始高度 */
    }

    to {
        height: 0;
        /* 目标高度 */
    }
}

.xzcs-right-fixed-app-code {
    .zxkf-text {
        width: 90px;
        font-size: 12px;
        text-align: center;
        margin: 0 auto;
    }

    img {
        width: 100%;
        height: 100%;
    }
}

.xzcs-right-fixed {
    position: fixed;
    bottom: 20px;
    right: 5px;
    z-index: 999;
    width: 60px;
    // height: 296px;
    // overflow: hidden;
    transition: height 0.3s;

    .right-fixed-down {
        font-size: 12px;
        color: #333333;
        background-color: #ffffff;
        border-bottom: 2px solid #f5f6f8;
        text-align: center;
        line-height: 15px;
        cursor: pointer;
    }

    .right-fixed-item2 {
        display: none;
    }

    .right-fixed-item {
        background-color: #ffffff;
        height: 70px;
        width: 60px;
        text-align: center;
        font-size: 12px;
        color: #333333;
        border-bottom: 2px solid #f5f6f8;
        box-sizing: border-box;
        padding-top: 14px;
        transition: height 0.4s;
        transition-property: height, padding;
        transition-duration: 0.4s, 0.4s;
        cursor: pointer;
        display: block;

        img {
            display: block;
            width: 25px;
            height: 25px;
            margin: 0 auto;
            margin-bottom: 2px;
        }

        .active {
            display: none;
        }

        &:hover {
            .active {
                display: block;
            }

            .noa {
                display: none;
            }
        }
    }

    .right-fixed-item-none {
        height: 0;
        padding: 0;
    }

    .right-fixed-list {
        border-radius: 60px;
        overflow: hidden;
        position: relative;
        left: 0;
        transition-property: left;
        transition-duration: 0.4s;
    }

    .right-fixed-list-none {
        left: 65px;
        animation: collapseAnimation 0.4s forwards;
        animation-delay: 0.5s;
    }

    .right-fixed-item-bottom {
        transition-property: background, border-radius, left;
        transition-duration: 0.2s, 0.4s, 0.4s;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        margin-top: 15px;
        border-radius: 50px;
        background: #fff;
        border: 1px solid rgba(37, 48, 68, 0.1);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #333333;
        cursor: pointer;
        position: relative;
        text-align: center;
        line-height: 50px;
        left: 0;

        &:hover {
            color: #ffffff;
            background-color: #1c87f3;
        }
    }

    .right-fixed-item-bottom-none {
        border-radius: 50px 0 0 50px;
        left: 11px;
        color: #ffffff;
        background-color: #1c87f3;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>